<template>
  <div class="ratings">
    <div class="head">
      <div class="left">
        <h2>{{infoList.score}}</h2>
        <p>综合评分</p>
        <span>高于周边服务99%</span>
      </div>
      <div class="right">
        <p>
          <van-rate
          color="#f90"
          size="15px"
          v-model="infoList.serviceScore"
          allow-half void-icon="star" void-color="#eee" />
          <span>服务态度<span>{{infoList.serviceScore}}</span></span>
        </p>
        <p>
          <van-rate
          color="#f90"
          size="15px"
          v-model="infoList.foodScore"
          allow-half void-icon="star" void-color="#eee" />
          <span>商品评分<span>{{infoList.foodScore}}</span></span>
        </p>
        <p>
          送达时间<span>{{infoList.deliveryTime}}分钟</span>
        </p>
      </div>
    </div>
    <van-tabs v-model="active">
      <van-tab title="全部">
        <div
        v-for="(item, index) in ratingsList"
        :key="index">
          <van-card
          :thumb="item.avatar">
          <template #title>
            <p>{{item.username}}</p>
          </template>
          <template #desc>
            <van-rate
            color="#f90"
            size="10px"
            v-model="item.score"
            allow-half void-icon="star" void-color="#eee" />
            <span :style="{marginLeft: '10px'}">{{item.deliveryTime}}</span>
            <p>{{item.text}}</p>
            <ul>
              <li
              :style="{float: 'left', border: '1px solid #eee', color:'#93999f', marginRight: '4px'}"
              v-for="(recommed, index) in item.recommend"
              :key="index">
                <span>{{recommed}}</span>
              </li>
            </ul>
          </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="满意">
        <div
        v-for="(item, index) in like"
        :key="index">
          <van-card
          :thumb="item.avatar">
          <template #title>
            <p>{{item.username}}</p>
          </template>
          <template #desc>
            <van-rate
            color="#f90"
            size="10px"
            v-model="item.score"
            allow-half void-icon="star" void-color="#eee" />
            <span :style="{marginLeft: '10px'}">{{item.deliveryTime}}</span>
            <p>{{item.text}}</p>
            <ul>
              <li
              :style="{float: 'left', border: '1px solid #eee', color:'#93999f', marginRight: '4px'}"
              v-for="(recommed, index) in item.recommend"
              :key="index">
                <span>{{recommed}}</span>
              </li>
            </ul>
          </template>
          </van-card>
        </div>
      </van-tab>
      <van-tab title="不满意">
        <div
        v-for="(item, index) in dislike"
        :key="index">
          <van-card
          :thumb="item.avatar">
          <template #title>
            <p>{{item.username}}</p>
          </template>
          <template #desc>
            <van-rate
            color="#f90"
            size="10px"
            v-model="item.score"
            allow-half void-icon="star" void-color="#eee" />
            <span :style="{marginLeft: '10px'}">{{item.deliveryTime}}</span>
            <p>{{item.text}}</p>
            <ul>
              <li
              :style="{float: 'left', border: '1px solid #eee', color:'#93999f', marginRight: '4px'}"
              v-for="(recommed, index) in item.recommend"
              :key="index">
                <span>{{recommed}}</span>
              </li>
            </ul>
          </template>
          </van-card>
        </div>
      </van-tab>
    </van-tabs>
  </div>
</template>

<script>
import { getShopRatings, getShopInfo } from '@/api/detial'
export default {
  name: 'Ratings',
  data () {
    return {
      infoList: [],
      ratingsList: [],
      like: [],
      dislike: [],
      active: 0
    }
  },
  async created () {
    const result = await getShopInfo()
    const res = await getShopRatings()
    // console.log(result.data.data)
    // console.log(res.data.data)
    this.infoList = result.data.data
    this.ratingsList = res.data.data
    this.ratingsList.forEach(item => {
      if (item.rateType === 0) {
        this.like.push(item)
      } else {
        this.dislike.push(item)
      }
    })
  }
}
</script>

<style lang="less" scoped>
.head{
  width: 100%;
  height: 116px;
  padding: 16px 0px;
  border-top: 1px solid #eee;
  border-bottom: 1px solid #eee;
  box-sizing: border-box;
  margin-bottom: 10px;
  .left{
    width: 137px;
    border-right: 1px solid #eee;
    height: 80px;
    text-align: center;
    float: left;
    h2{
      color:#f90;
      font-weight: normal;
    }
    p{
      font-size: 12px;
    }
    span{
      font-size: 12px;
      color: #666;
    }
  }
  .right{
    float: left;
    padding: 6px 0px 6px 24px;
    span{
      font-size: 12px;
      margin-left: 10px;
      span{
        color: #f90;
      }
    }
    p:nth-child(3){
      font-size: 12px;
      margin-top: 8px;
      span{
        color: #93999f;
      }
    }
  }
}
/deep/.van-card__thumb{
  width: 28px;
  height: 28px;
}
/deep/.van-icon__image{
  width: 28px;
  height: 28px;
}
/deep/.van-card{
  background-color: #fff;
}
</style>
